<template>
    <div class="container">
      <div class="tips-title">Part 1. Color 色彩</div>
      <div class="tips-title">1.主色<span class="tips-explain"></span></div>
      <el-row>
        <el-col :span="6">
          <div class="demo-color-box" style="background: rgb(64, 158, 255)">
            <span>Brand Color</span>
            <div class="value">#409EFF / rgb(64, 158, 255)</div>
            <div class="bg-color-sub" style="background: rgb(236, 245, 255);">
              <div class="bg-color-sub-item" style="width: 11.11%;background: rgb(83, 168, 255);"></div>
              <div class="bg-color-sub-item" style="width: 11.11%;background: rgb(102, 177, 255);"></div>
              <div class="bg-color-sub-item" style="width: 11.11%;background: rgb(121, 187, 255);"></div>
              <div class="bg-color-sub-item" style="width: 11.11%;background: rgb(140, 197, 255);"></div>
              <div class="bg-color-sub-item" style="width: 11.11%;background: rgb(160, 207, 255);"></div>
              <div class="bg-color-sub-item" style="width: 11.11%;background: rgb(179, 216, 255);"></div>
              <div class="bg-color-sub-item" style="width: 11.11%;background: rgb(198, 226, 255);"></div>
              <div class="bg-color-sub-item" style="width: 11.11%;background: rgb(217, 236, 255);"></div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="tips-title">2.辅助色<span class="tips-explain"></span></div>
      <el-row :gutter="10">
        <el-col :span="6">
          <div class="demo-color-box" style="background: rgb(103, 194, 58);">
            <span>Success</span>
            <div class="value">#67C23A / rgb(103, 194, 58)</div>
            <div class="bg-color-sub">
              <div class="bg-color-sub-item" style="width: 50%;background: rgb(225, 243, 216);"></div>
              <div class="bg-color-sub-item" style="width: 50%;background: rgb(240, 249, 235);"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="demo-color-box" style="background: rgb(230, 162, 60);">
            <span>Warning</span>
            <div class="value">#E6A23C / rgb(230, 162, 60);</div>
            <div class="bg-color-sub">
              <div class="bg-color-sub-item" style="width: 50%;background: rgb(250, 236, 216);"></div>
              <div class="bg-color-sub-item" style="width: 50%;background: rgb(253, 246, 236);"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="demo-color-box" style="background: rgb(245, 108, 108);">
            <span>Danger</span>
            <div class="value">#F56C6C / rgb(245, 108, 108);</div>
            <div class="bg-color-sub">
              <div class="bg-color-sub-item" style="width: 50%;background: rgb(253, 226, 226);"></div>
              <div class="bg-color-sub-item" style="width: 50%;background: rgb(254, 240, 240);"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="demo-color-box" style="background: rgb(144, 147, 153);">
            <span>Info</span>
            <div class="value">#909399 / rgb(144, 147, 153);</div>
            <div class="bg-color-sub">
              <div class="bg-color-sub-item" style="width: 50%;background: rgb(233, 233, 235);"></div>
              <div class="bg-color-sub-item" style="width: 50%;background: rgb(244, 244, 245);"></div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="tips-title">3.中性色<span class="tips-explain"></span></div>
      <el-row :gutter="10">
        <el-col :span="5">
          <div class="demo-color-box demo-color-box-other" style="background: rgb(48, 49, 51);">
            <span>主要文字</span>
            <div class="value">#303133 rgb(48, 49, 51)</div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="demo-color-box demo-color-box-other" style="background: rgb(96, 98, 102);">
            <span>常规文字</span>
            <div class="value">#606266 rgb(96, 98, 102)</div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="demo-color-box demo-color-box-other" style="background: rgb(144, 147, 153);">
            <span>次要文字</span>
            <div class="value">#909399 rgb(144, 147, 153)</div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="demo-color-box demo-color-box-other" style="background: rgb(192, 196, 204);">
            <span>占位文字</span>
            <div class="value">#C0C4CC rgb(192, 196, 204)</div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="demo-color-box demo-color-box-other" style="color: #000;background: rgb(220, 223, 230);">
            <span>一级边框</span>
            <div class="value">#DCDFE6 rgb(220, 223, 230)</div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="demo-color-box demo-color-box-other" style="color: #000;background: rgb(228, 231, 237);">
            <span>二级边框</span>
            <div class="value">#E4E7ED rgb(228, 231, 237)</div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="demo-color-box demo-color-box-other" style="color: #000;background: rgb(235, 238, 245);">
            <span>三级边框</span>
            <div class="value">#EBEEF5 rgb(235, 238, 245)</div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="demo-color-box demo-color-box-other" style="color: #000;background: rgb(242, 246, 252);">
            <span>四级边框</span>
            <div class="value">#F2F6FC rgb(242, 246, 252)</div>
          </div>
        </el-col>
      </el-row>
      <div class="tips-title">Part 2. ColorPicker 颜色选择器</div>
      <div class="tips-title">1.基本用法-有默认值 {{color1}}</div>
      <el-color-picker v-model="color1"></el-color-picker>
      <div class="tips-title">2.基本用法-无默认值 {{color2}}</div>
      <el-color-picker v-model="color2"></el-color-picker>
      <div class="tips-title">3.选择透明度 show-alpha {{color3}}</div>
      <el-color-picker v-model="color3" show-alpha></el-color-picker>
      <div class="tips-title">4.预定义颜色 {{color5}}</div>
      <el-color-picker v-model="color5" show-alpha :predefine="predefineColors"></el-color-picker>
      <div class="tips-title">5.不同尺寸</div>
      <el-color-picker v-model="color4"></el-color-picker>
      <el-color-picker v-model="color4" size="medium"></el-color-picker>
      <el-color-picker v-model="color4" size="small"></el-color-picker>
      <el-color-picker v-model="color4" size="mini"></el-color-picker>
    </div>
</template>
<script>
  export default {
    name: 'b-color',
    data() {
      return {
        color1: '#409EFF',
        color2: null,
        color3: 'rgba(19, 206, 102, 0.8)',
        color5: 'rgba(255, 69, 0, 0.68)',
        predefineColors: [
          '#ff4500',
          '#ff8c00',
          '#ffd700',
          '#90ee90',
          '#00ced1',
          '#1e90ff',
          '#c71585',
          'rgba(255, 69, 0, 0.68)',
          'rgb(255, 120, 0)',
          'hsv(51, 100, 98)',
          'hsva(120, 40, 94, 0.5)',
          'hsl(181, 100%, 37%)',
          'hsla(209, 100%, 56%, 0.73)',
          '#c7158577'
        ],
        color4: '#409EFF'
      }
    }
  }
</script>
<style>

  .demo-color-box {
    position: relative;
    border-radius: 4px;
    padding: 20px;
    margin: 5px 0;
    height: 114px;
    box-sizing: border-box;
    color: #fff;
    font-size: 14px;
  }
  .demo-color-box .value {
    font-size: 12px;
    opacity: .9;
    line-height: 24px;
  }
  .bg-color-sub {
    width: 100%;
    height: 40px;
    left: 0;
    bottom: 0;
    position: absolute;
  }
  .bg-color-sub-item:first-child {
    border-radius: 0 0 0 4px;
  }
  .bg-color-sub-item {
    height: 100%;
    float: left;
    display: block;
  }
  .demo-color-box-other {
    height: 74px;
    margin: 10px 0!important;
    border-radius: 4px 4px 4px 4px!important;
    padding: 15px 20px;
  }

</style>

